/* 样式文件索引 - 统一导入入口 */

/* 组件样式 */
@import './AddCardModal.css';
@import './BuddyCard.css';
@import './MapComponent.css';

/* 页面样式 */
@import './Auth.css';
@import './Dashboard.css';
@import './FindBuddy.css';
@import './Home.css';
@import './MapView.css';
@import './Messages.css';
@import './Profile.css';
@import './Settings.css';
@import './SocialCards.css';

/* 表单样式 */
@import './LoginForm.css';
@import './RegisterForm.css';

/* 全局基础样式变量 */
:root {
  /* 主色调 */
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
  --primary-color-active: #096dd9;
  --primary-gradient: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  
  /* 成功色 */
  --success-color: #52c41a;
  --success-color-hover: #73d13d;
  --success-color-active: #389e0d;
  --success-gradient: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  
  /* 警告色 */
  --warning-color: #faad14;
  --warning-color-hover: #ffc53d;
  --warning-color-active: #d48806;
  
  /* 错误色 */
  --error-color: #ff4d4f;
  --error-color-hover: #ff7875;
  --error-color-active: #d9363e;
  
  /* 中性色 */
  --text-color-primary: #262626;
  --text-color-secondary: #595959;
  --text-color-disabled: #bfbfbf;
  --text-color-inverse: #ffffff;
  
  /* 背景色 */
  --background-color: #ffffff;
  --background-color-light: #fafafa;
  --background-color-base: #f5f5f5;
  
  /* 边框色 */
  --border-color-base: #d9d9d9;
  --border-color-split: #f0f0f0;
  --border-color-light: #e8e8e8;
  
  /* 阴影 */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* 圆角 */
  --border-radius-small: 4px;
  --border-radius-base: 6px;
  --border-radius-large: 8px;
  --border-radius-card: 12px;
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  
  /* 字体大小 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  
  /* 动画时长 */
  --animation-duration-slow: 0.3s;
  --animation-duration-base: 0.2s;
  --animation-duration-fast: 0.1s;
  
  /* z-index 层级 */
  --z-index-dropdown: 1050;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* 全局工具类 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.rounded {
  border-radius: var(--border-radius-base);
}

.rounded-lg {
  border-radius: var(--border-radius-large);
}

.rounded-card {
  border-radius: var(--border-radius-card);
}

.shadow {
  box-shadow: var(--shadow-base);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.transition {
  transition: all var(--animation-duration-base) ease;
}

.transition-slow {
  transition: all var(--animation-duration-slow) ease;
}

/* 响应式断点工具类 */
@media (max-width: 576px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .hidden-md {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

/* 通用动画类 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn var(--animation-duration-base) ease;
}

.animate-fade-in-up {
  animation: fadeInUp var(--animation-duration-slow) ease;
}

.animate-fade-in-down {
  animation: fadeInDown var(--animation-duration-slow) ease;
}

.animate-slide-in-left {
  animation: slideInLeft var(--animation-duration-slow) ease;
}

.animate-slide-in-right {
  animation: slideInRight var(--animation-duration-slow) ease;
}

.animate-scale-in {
  animation: scaleIn var(--animation-duration-base) ease;
}

/* 滚动条全局样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--background-color-base);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #d9d9d9 0%, #bfbfbf 100%);
  border-radius: 3px;
  transition: background var(--animation-duration-base) ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #bfbfbf 0%, #a6a6a6 100%);
}
